import React from 'react';

//react-router;
import {Link} from 'react-router';

import './index.less';

//component
import ReIcon from '../ReIcon';
import ReNumberTextField from '../ReNumberTextField';

export default class view extends React.Component {
    static propTypes = {
        label: React.PropTypes.string,
        errorText: React.PropTypes.string,
        successText: React.PropTypes.string,
        notfullWidth: React.PropTypes.bool,
        isTextarea: React.PropTypes.bool,
        isLabel: React.PropTypes.bool,
        onChange: React.PropTypes.func
    };

    static defaultProps = {
        label: 'default',
        notfullWidth: false,
        isTextarea: false,
        isLabel: true
    }

    constructor(props, context) {

        super(props, context);

        // init state;
        this.state = {
            isEditorText: false,
            editVal: props.value || props.value === 0 ? props.value : '',
            isPassword: props.type === 'password',
            pwdState: false,//不可见
            valueLength: props.value && props.value.length,
            focus: false,
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            editVal: nextProps.value || nextProps.value === 0 ? nextProps.value : '',
            valueLength: nextProps.value && nextProps.value.length
        })
    }

    handleKeyDown(e) {
        this.props.onKeyDown && this.props.onKeyDown(e);

        if (e.which === 13) {
            this.props.enterKeyHandler && this.props.enterKeyHandler();
        }
    }


    handleChange(e) {
        let value = e.target.value;
        if (this.props.supportEnOnly) {
            value = value ? value.replace(/[^\d/a-zA-Z]/g, '') : '';
        }

        if (this.props.supportIntOnly) {//仅支持整数
            value = value ? value.replace(/[^\d]/g, '') : '';

        }

        if (this.props.CN) {
            if ($$.utils.formRegular.valueLength(value, this.props.maxLength)
                || value) {
                this.setState({
                    editVal: value,
                    valueLength: $$.utils.formRegular.length(value, this.props.maxLength)
                });
            }
        } else {
            this.setState({
                editVal: value,
                valueLength: value.length
            });
        }
        this.props.onChange && this.props.onChange(e, value);
    }

    clearValue() {
        if (this.props.readOnly) {
            return;
        }
        this.setState({
            editVal: '',
            valueLength: 0
        });
        this.props.onChange && this.props.onChange(null, '');
        this.props.onBlur && this.props.onBlur();
        this.props.closeHandler && this.props.closeHandler();
    }

    searchValue() {
        this.props.searchHandler && this.props.searchHandler();
    }

    togglePassword() {
        this.setState({
            pwdState: !this.state.pwdState
        });
    }

    handleViewFocus(e) {
        this.setState({
            isEditorText: true,
            editVal: e.target.value,
            valueLength: e.target.value.length,
            focus: true
        });
    }

    handleEditblur() {
        this.setState({
            isEditorText: false,
            focus: false
        });
    }

    //logic
    renderTextField() {
        // return this.state.isEditorText ? this.renderEditTextField() : this.renderViewTextField();
        return this.renderEditTextField();
    }

    //view
    renderViewTextField() {
        let _props = {...this.props, value: this.props.value || ''};
        _props.onChange && delete _props.onChange;
        _props.onFocus && delete _props.onFocus;
        delete _props.type;
        delete _props.prefixText;
        delete _props.supportEnOnly;
        delete _props.children;
        delete _props.closeIcon;
        delete _props.tipLeft;
        delete _props.searchIcon;
        delete _props.searchHandler;
        delete _props.enterKeyHandler;
        delete _props.isRequired;
        delete _props.closeHandler;
        delete _props.labelClassName;
        delete _props.CN;
        delete _props.descText;
        delete _props.errorText;
        delete _props.successText;
        delete _props.notfullWidth;
        delete _props.isTextarea;
        delete _props.isLabel;
        _props.className && delete _props.className;
        _props.label && delete _props.label;

        if (this.props.isTextarea) {
            return (
                <textarea
                    {..._props}
                    onChange={() => null}
                    className="textarea"
                    type={this.state.isPassword ? ( this.state.pwdState ? 'text' : 'password') : this.props.type}
                    onFocus={(...arg) => {
                        this.handleViewFocus(...arg);
                        this.props.onFocus && this.props.onFocus(...arg)
                    }}
                />
            )
        } else {
            if (this.props.type === 'number') {
                return (
                    <ReNumberTextField
                        {..._props}
                        onChange={() => null}
                        className="input"
                        type={this.props.type}
                        onFocus={(...arg) => {
                            this.handleViewFocus(...arg);
                            this.props.onFocus && this.props.onFocus(...arg)
                        }}
                    />
                )
            } else {
                return (
                    <input
                        {..._props}
                        onChange={() => null}
                        className="input"
                        type={this.state.isPassword ? ( this.state.pwdState ? 'text' : 'password') : this.props.type}
                        onFocus={(...arg) => {
                            this.handleViewFocus(...arg);
                            this.props.onFocus && this.props.onFocus(...arg)
                        }}
                    />
                )

            }

        }

    }

    renderEditTextField() {
        let _props = {...this.props, ... {style: this.props.innerStyle}, value: this.props.value || ''};
        // _props.value && delete _props.value;
        _props.onBlur && delete _props.onBlur;
        _props.onChange && delete _props.onChange;
        delete _props.type;
        delete _props.prefixText;
        delete _props.supportEnOnly;
        delete _props.supportIntOnly;
        delete _props.children;
        delete _props.closeIcon;
        delete _props.tipLeft;
        delete _props.searchIcon;
        delete _props.searchHandler;
        delete _props.enterKeyHandler;
        delete _props.isRequired;
        delete _props.closeHandler;
        delete _props.labelClassName;
        delete _props.CN;
        delete _props.descText;
        delete _props.errorText;
        delete _props.successText;
        delete _props.notfullWidth;
        delete _props.isTextarea;
        delete _props.isLabel;
        _props.className && delete _props.className;
        _props.label && delete _props.label;

        if (this.props.isTextarea) {
            return (
                <textarea
                    {..._props}
                    className="textarea"
                    value={this.state.editVal}
                    type={this.state.isPassword ? ( this.state.pwdState ? 'text' : 'password') : this.props.type}
                    onKeyDown={(e) => this.handleKeyDown(e)}
                    onChange={(...arg) => {
                        this.handleChange(...arg)
                    }}
                    onBlur={(...arg) => {
                        this.handleEditblur();
                        this.props.onBlur && this.props.onBlur(...arg)
                    }}
                />
            )
        } else {
            if (this.props.type === 'number') {
                return (
                    <ReNumberTextField
                        {..._props}
                        className={this.props.readOnly ? 'input read-only' : 'input'}
                        value={this.state.editVal}
                        type={this.props.type}
                        onChange={(...arg) => {
                            this.handleChange(...arg)
                        }}
                        onKeyDown={(e) => this.handleKeyDown(e)}
                        onBlur={(...arg) => {
                            this.handleEditblur();
                            this.props.onBlur && this.props.onBlur(...arg)
                        }}
                    />
                )
            } else {
                return (
                    <input
                        {..._props}
                        className={this.props.readOnly ? 'input read-only' : 'input'}
                        value={this.state.editVal}
                        type={this.state.isPassword ? ( this.state.pwdState ? 'text' : 'password') : this.props.type}
                        onKeyDown={(e) => this.handleKeyDown(e)}
                        onChange={(...arg) => {
                            this.handleChange(...arg)
                        }}
                        onBlur={(...arg) => {
                            this.handleEditblur();
                            this.props.onBlur && this.props.onBlur(...arg)
                        }}

                    />
                )

            }
        }
    }

    renderLabel() {
        return (
            <label
                className={this.props.labelClassName ? this.props.labelClassName + ' label' : 'label'}>
                {this.props.label || 'default'}
            </label>
        )
    }

    renderError() {
        return (
            <p className="err-text"><ReIcon icon="tanhao"/> {this.props.errorText}</p>
        )
    }

    renderSuccess() {
        return (
            <p className="success-text"><ReIcon icon="zhengque"/> {this.props.successText}</p>
        )
    }

    componentDidMount() {
        this._isMounted = true;
    }

    componentWillUnmount() {
        this._isMounted = false;
    }

    render() {
        let className = this.props.className ? 'ori-retextfield-root ' + this.props.className : 'ori-retextfield-root ';
        className = this.props.notfullWidth ? className : className + ' full-width ';
        className = this.props.errorText ? className + ' err-box ' : className;
        className = this.props.successText ? className + ' success-box ' : className;
        className = this.props.isLabel ? className + ' is-label ' : className;
        let {editVal, isPassword, pwdState, valueLength, focus} = this.state;
        let flag = this.props.closeIcon || this.props.searchIcon || isPassword || this.props.descText;
        let {tipLeft, maxLength} = this.props;
        return (
            <div className={focus ? className + ' focus' : className}>
                {this.props.prefixText &&
                <div className={valueLength > 0 ? 'prefix-text black' : 'prefix-text'}>{this.props.prefixText}</div>}
                {!this.props.isLabel ? '' : this.renderLabel()}
                {/*{this.props.errorText ? this.renderError() : null}*/}
                {/*{this.props.successText ? this.renderSuccess() : null}*/}
                {this.props.isRequired && <span className="required">*</span>}
                {this.renderTextField()}
                {
                    flag &&
                    <div className="icon-wrapper">
                        <div className="clear-value">
                            {
                                tipLeft &&
                                <span className="tip-length">
                                    {valueLength ? valueLength : 0}/{maxLength}
                                </span>
                            }
                            {
                                ((this.props.value || this.props.value === 0) && this.props.closeIcon) &&
                                <span className="clear-btn" onClick={(e) => this.clearValue()}>
                                    <ReIcon className="clear-icon" icon="close"/>
                                </span>
                            }
                            {
                                this.props.searchIcon &&
                                <span className="search-btn" onClick={(e) => this.searchValue()}>
                                    <ReIcon className="clear-icon" icon="search"/>
                                </span>
                            }
                            {
                                isPassword &&
                                <span onClick={(e) => this.togglePassword()}>
                                    <ReIcon className="clear-icon" icon={pwdState ? 'open_eye' : 'close_eye'}/>
                                </span>
                            }

                            {this.props.descText && <div className="text-limit">{this.props.descText}</div>}
                        </div>
                    </div>
                }
                {this.props.children}
            </div>
        );
    }
}
